<template>
  <div>
    <el-dialog v-model="dialogFormVisible" title="分配角色" @close="EventBus.emit('changshow', false)">
      <el-form :model="form">
        <el-form-item label="账号：" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="姓名：" :label-width="formLabelWidth">
          <el-input v-model="form.nickName" autocomplete="off" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="邮箱：" :label-width="formLabelWidth">
          <el-input v-model="form.email" autocomplete="off" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="密码：" :label-width="formLabelWidth">
          <el-input v-model="form.password" autocomplete="off" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="备注：" :label-width="formLabelWidth">
          <el-input v-model="form.note" :rows="3" type="textarea" placeholder="请输入备注" />
        </el-form-item>
        <div>
          <span style="margin: 0 40px 0 20px">是否启用</span>
          <el-radio-group v-model="radio1" class="ml-4">
            <el-radio label="1" size="large">是</el-radio>
            <el-radio label="2" size="large">否</el-radio>
          </el-radio-group>
        </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="comfil">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
  
<script setup lang='ts'>
import { ref, reactive, computed, withDefaults } from 'vue';
import EventBus from '@/utils'
import * as http from '@/request/api'

const dialogFormVisible = ref(false)
EventBus.on('showEdit', () => dialogFormVisible.value = true)

// ts 父子传值 传默认值要使用 withDefaults 
const props = withDefaults(defineProps<{ show: boolean }>(), { show: false })

const radio1 = ref('0')
// const dialogFormVisible = computed(() => props.show)
const formLabelWidth = '100px'
const form = reactive({
  nickName: '',
  username: '',
  password: '',
  note: '',
  email: '',
})

async function comfil() {
  let RegisterRes = await http.admin.AdminRegister(form)
  EventBus.emit('changshow', false)
}

function close() { }
</script>
  
<style>
</style>